import React, { Component } from 'react'
import { FooterTab } from '../common'

const goodsArr = [
  {
    name: '工业银',
    price: 3530,
    typeCode: 'AG',
  },
  {
    name: '工业油',
    price: 3333,
    typeCode: 'CO',
  }
]

export default class CentralDiscPage extends Component {
  constructor() {
    super()

    this.renderGoods = this.renderGoods.bind(this)

    this.state = {
      activeIndex: 0,
      tabIndex: 1,
      typeCode: 'AG',
      chartTypeIndex: 4,
    }
  }
  render() {
    const { activeIndex, tabIndex, typeCode, chartTypeIndex } = this.state
    return (
      <div className={`rt-central-disc-container`}>
        <div className={`rt-notice-carousel`}>
          <span>公告</span>
          <span>关于开通借记卡支付通道的通知</span>
        </div>

        <div className={`rt-goods-price-box`}>
          {
            goodsArr.map(v => (
              <div
                key={v.typeCode}
                className={`rt-inner-box ${(v.typeCode === typeCode) ? 'rt-active-box': ''}`}
                onClick={() => {
                  if (v.typeCode === typeCode) return
                  this.setState({
                    typeCode: v.typeCode,
                  })
                }}
              >
                <span className={`rt-goods-name ${(v.typeCode != typeCode ? 'rt-font-color' : '')}`}>{v.name}</span>
                <span className={`rt-goods-price ${(v.typeCode != typeCode ? 'rt-font-color' : '')}`}>{v.price}</span>
                <i className={`iconfont icon-question ${(v.typeCode != typeCode ? 'rt-font-color' : '')}`} />
              </div>
            ))
          }
        </div>

        <div className={`rt-price-statistics-box`}>
          <span>昨收：3491</span>
          <span>开盘：3499</span>
          <span>最高：3520</span>
          <span>最低：3479</span>
        </div>

        {/*test*/}
        {[1, 1, 1, 1, 1].map(v => (
          <div key={Math.random()} className={`rt-price-statistics-box`}>
            <span>昨收：3491</span>
            <span>开盘：3499</span>
            <span>最高：3520</span>
            <span>最低：3479</span>
          </div>
        ))}

        <div className={`rt-chart-genre-box`}>
          {
            ['分时线', '5分钟线', '30分钟线', '1小时线', '日线'].map((v, index) => (
              <span
                key={v}
                className={`${(chartTypeIndex === index) ? 'rt-active-genre' : ''}`}
                onClick={() => {
                  if (chartTypeIndex === index) return
                  this.setState({
                    chartTypeIndex: index,
                  })
                }}
              >
                {v}
              </span>
            ))
          }
        </div>

        <img
          alt="chart"
          className={`rt-chart-img`}
          src={require('static/images/chart.png')}
        />

        <div className={`rt-account-recharge-cash-box`}>
          <div className={`rt-account-box`}>
            <i className={`iconfont icon-question`} />
            <span>资产</span>
            <span className={`rt-balance`}>3,686.90元</span>
            <img alt="auth-img" src={require('static/images/unauth.png')} />
          </div>

          <div className={`rt-rechart-cash-box`}>
            <div>
              <i className={`iconfont icon-question`} />
              <span>充值</span>
            </div>

            <div>
              <i className={`iconfont icon-question`} />
              <span>提现</span>
            </div>
          </div>
        </div>

        <div className={`rt-available-goods-box`}>
          {this.renderGoods(0)}
          {this.renderGoods(1)}
          {this.renderGoods(2)}
        </div>

        <div className={`rt-operation-btn-grp`}>
          <div>
            <i className={`iconfont icon-question`} />
            <span>买涨</span>
          </div>

          <div>
            <i className={`iconfont icon-question`} />
            <span>买跌</span>
          </div>
        </div>

        <div className={`rt-tip-msg-box`}>您的账户尚未实名认证，无法交易</div>

        <div className={`rt-auth-btn-box`}>
          <div>立即实名认证</div>
        </div>

        <FooterTab defaultActiveIndex={1} />
      </div>
    )
  }
  renderGoods(index) {
    const { activeIndex } = this.state
    return (
      <div
        className={`rt-goods ${activeIndex === index ? 'rt-active-goods' : ''}`}
        onClick={() => {
          if (activeIndex === index) return
          this.setState({
            activeIndex: index,
          })
        }}
      >
        <span>3KG</span>
        <span>250元／手</span>
        <span>波动盈亏3元</span>
        {
          activeIndex === index
          ? (
            <div className={`cm-right-angle-trangle-box rt-corner-box`}>
              <div className={`cm-tick-box cm-tick-box-hide rt-adjust-tick`}></div>
            </div>
          )
          : null
        }
      </div>
    )
  }
}